<template>

	<div class="rank-list-item">
	  <div class="rank-item-top" :style="{background: bgColor}">
		  <div class="rank-item-top-one">{{topList.name.slice(0,1)}}</div>
		  <div>
			  <div class="rank-item-top-two">{{topList.name.slice(1,3)}}</div>
			  <div>{{topList.trackNumberUpdateTime|formatDate}}</div>
		  </div>
		  <div class="rank-item-top-icon">
			  <i class="iconfont icon-icon_play"></i>
		  </div> 
	  </div>
	   <el-table 
	      :data="detailList"
	      stripe
		  :show-header="false"
	      style="width: 100%;height=100%;"
		  @row-click="rowHandle"> 
	      <el-table-column
			type="index"
	        width="30px"
			align="left">
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        width="auto"
			:show-overflow-tooltip="true"
			align="left">
	      </el-table-column>
	      <el-table-column
	        prop="ar[0].name"
			width="120"
			align="right"
			>
	      </el-table-column>
	    </el-table>
	</div>

</template>

<script>
import {formatDate} from "utils/data.js"

export default {
  name:'RankListItem',
  props:['topList','detailList','bgColor'],
  data(){
    return{
      
    }
  },
  filters:{
  	  formatDate(val){
  		  if(val === null){
  			  return '无'
  		  }else {
  			  let date = new Date(val);
  			  return formatDate(date, "MM月dd日");
  		  }
  	  }
  },
  created() {
  },
  methods:{
   rowHandle(row, column, event){
	   this.$router.push(
	     "/musiclistdetail/" + this.topList.id + "/" + new Date().getTime()
	   );
   }
   
  }
}
</script>

<style lang="less" scoped>
.rank-list-item{
	        margin-bottom: 20px;
			height: 400px;
			width: 30%;
			background-color: #fff;
			.rank-item-top{
				height: 100px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20px 10px 20px 40px;
				background-color: #5991e8;
				color: #fff;
				.rank-item-top-one{	
					font-size:60px;
					font-weight: 500;  
					font-style: italic;
					
				}
				.rank-item-top-two{
					font-size: 24px;
					font-weight: 500;
					font-style: italic;
					margin-right: 70px;
				}
				.rank-item-top-icon{
					position: relative;
					width: 40px;
					height: 40px;
					border:2px solid #fff; 
					border-radius: 50%;
					// margin-left: 10px;
					
					i{
						position: absolute;
						top: 10px;
						left: 10px;
					}
				}
			}
			.rank-list-bottom{
				font-size: 14px;
			}
		}
		/deep/ .el-table td, .el-table th{
			padding: 4px 0;
		}
</style>